<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css">

</head>
<body>
    <br><br><br>
    <div class="container col-md-6 col-md-offset-3" style="background: #FFF888">

        <br><br><br>
        <div style="font-size: 30px; color: #363636; font-family: 华文中宋,serif; text-align: center">找回密码</div>
        <br>
        <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">用户名：</label>
            <input class="col-md-6" type="text" style="padding: 5px" id="userName"/>
        </div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-10 col-md-offset-3" style="font-size: 12px; color: #666666">请输入注册时预留的邮箱</label>
            <label class="col-md-2  col-md-offset-1">预留邮箱：</label>
            <input class="col-md-6" type="text" style="padding: 5px" id="userPostBox"/>
        </div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">新密码：</label>
            <input class="col-md-6" type="password" style="padding: 5px" id="newUserPass"/>
        </div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">再次输入：</label>
            <input class="col-md-6" type="password" style="padding: 5px" id="reEnterUserPass"/>
        </div>
        <br>

        <div class="row" style="font-size: 17px">
            <label class="col-md-2  col-md-offset-1">验证码：</label>
            <input class="col-md-3" type="text" style="padding: 5px" id="userCode"/>
            <!--显示验证码-->
            <div class="col-md-2 col-md-offset-1" id="code"></div>
        </div>

        <label class="col-md-6 col-md-offset-3" style="font-size: 14px; color: #FF0000; height: 30px" id="tip"></label>

        <button class="col-md-3 col-md-offset-4" style="border: 1px solid black; background: #FFFFF8; height: 40px" onclick="resetUserPass()">重置密码</button>
        <div class="col-md-12" style="height: 30px;"></div>
    </div>
</body>
<script type="text/javascript">
    let userName, userPostBox, newUserPass, reEnterUserPass, tip;
    userName = $("#userName");
    userPostBox = $("#userPostBox");
    newUserPass = $("#newUserPass");
    reEnterUserPass = $("#reEnterUserPass");
    userCode = $("#userCode");
    tip = $("#tip");

    // 存放验证码
    let seCode;

    // 引入验证码
    $("#code").load("html/securityCode.html", function (){
        seCode = nowCode;
        myCallback = getCode;
    });

    // 获取验证码的回调函数
    function getCode(code) {
        seCode = code;
    }

    function resetUserPass() {
        // 通过检查后，向服务器发送重置请求
        if (check()) {
            $.post("/QG_PostBar/user?method=changeUserPass",
                {"userName": userName.val(), "userPostBox": userPostBox.val(), "newUserPass": newUserPass.val()}, function (data){
               if (data === "success") {
                   tip.html("重置密码成功！");
               } else {
                   tip.html("重置密码失败，请检查信息是否正确！");
               }
            });
        }
    }

    function check() {
        if (userPostBox.val().length < 10) {
            tip.html("请输入合法的邮箱！");
            return false;
        } else if (userName.val().length < 3) {
            tip.html("用户名长度必须大于等于 3 ！");
            return false;
        } else if (newUserPass.val().length < 6) {
            tip.html("密码长度必须大于等于 6 ！");
            return false;
        } else if(newUserPass.val() !== reEnterUserPass.val()) {
            tip.html("两次输入的密码不一致，请重新输入！");
            return false;
        } else if (userCode.val() !== seCode) {
            tip.html("验证码错误，请重新输入！");
            return false;
        } else return true;
    }

</script>
</html>